<template>
  <div class="regional-agen">
    <CommTitle title="区域简介"/>
    <div class="regional-agen-conted">
      <div class="right-card-two">
        <h2>工作内容</h2>
        <p>{{ currentRegionData?.workContent }}</p>
        <div v-if="!currentRegionData">请及时补充内容...</div>
      </div>
      <div class="right-card-three">
        <h2>设计方案</h2>
        <ul>
          <li v-for="(item, index) in currentRegionData?.DesignScheme" :key="index">
            {{ item }}
          </li>
        </ul>
        <div v-if="!currentRegionData">请及时补充内容...</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, toRefs } from 'vue'
import CommTitle from './CommTitle.vue'
import { useStore } from 'vuex'
const store = useStore()
const { currentRegionName } = toRefs(store.state)
const regionData = ref([])
onMounted(async () => {
  const resp = await fetch(`${window.modelUrl}json/AreaContent.json`)
  if (resp) {
    regionData.value = await resp.json()
  }
})

// 切换区域介绍数据
const currentRegionData = computed(() => {
  return regionData.value.find(item => {
    return item.stationName.includes(currentRegionName.value)
  })
})
</script>

<style lang="less">
.regional-agen{
    height: 100%;
    // background-color: red;
  .regional-agen-conted {
    height: calc(100% - 70px);
    // background-color: red;
    margin: 0 10px 10px 15px;
    padding-right: 5px;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 16px;
    overflow: hidden;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 5px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: rgba(75, 137, 255, 0.2);
    }
    h2 {
      font-family: Source Han Sans CN;
      font-size: 18px;
      font-weight: 900;
      margin-bottom: 10px;
    }
    p {
      font-size: 17px;
      text-indent: 2em;
      margin-bottom: 15px;
    }
    ul {
      list-style: none;
      padding-left: 1em;

      li {
        font-size: 16px;
        padding-left: 1em;
        &::before {
          content: '';
          display: inline-block;
          height: 0.6em;
          width: 0.6em;
          background-color: rgba(81, 154, 228, 0.673);
          border-radius: 50%;
          margin-left: -1em;
          margin-right: 0.5em;
        }
      }
    }

  }
}
</style>
